<template>
  <div class="list_view_container">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="isLoading"
        @load="onLoad"
        offset="18"
        :finished="isHave ? false : true"
        finished-text="没有更多了"
        :immediate-check="false"
      >
        <div
          v-for="item in listData"
          :key="item.id"
          @click="openDetail(item.id)"
        >
          <ListItem
            :id="item.id"
            :title="item.title"
            :author="item.author_name"
            :cmt-count="0"
            :time="item.publish_tiem"
            :cover="item.cover_img"
            :content="item.content"
            @remove-article="removeArticle"
          ></ListItem>
        </div>
        <van-empty v-if="!listData.length" description="该分类下暂无文章" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ListItem from "@/components/ListItem/ListItem.vue";
import { getListData } from "@/api/request.js";
export default {
  props: {
    // 频道id
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 列表数据
      listData: [],
      // 是否还有数据
      isHave: Date.now(),
      // 是否正在下来刷新
      isLoading: false,
    };
  },
  components: {
    ListItem,
  },
  created() {
    this.getListData();
  },
  methods: {
    // 获取列表数据
    async getListData() {
      // const params = {
      //   channel_id: this.id,
      //   timestamp: this.isHave,
      // };
      const params = {
        // pagenum: 1,
        // pagesize: 10,
        cate_id: this.id ? this.id : "",
        state: "已发布",
      };
      const { data: res } = await getListData(params);
      this.isLoading = false;
      const { status, message, data } = res;
      if (status !== 0) {
        return this.$notify({ type: "danger", message: message });
      }

      this.listData = [...this.listData, ...data];
    },
    // 下拉刷新
    onRefresh() {
      // console.log("下拉");
      this.getListData();
    },
    // 上拉加载
    onLoad() {
      // console.log("上拉");
      this.getListData();
    },
    // 跳转到详情页
    openDetail(id) {
      // console.log("item触发了");
      this.$router.push(`/detail/${id}`);
    },
    // 移除不感兴趣的文章
    removeArticle(id) {
      // 对原数组进行 filter 方法的过滤
      this.listData = this.listData.filter(item => item.art_id !== id);
      // 判断剩余数据的文章数量是否小于 10
      if (this.listData.length < 10) {
        // 主动请求下一页的数据
        this.getListData();
      }
    },
  },
};
</script>

<style></style>
